<template>
	<div id="bottom">
		<ul id="bottom_ul">
			<li id="first_bottom">
				<div class="bottom_logo">
					<el-icon :size="20" color="rgb(193,193,193)"><HomeFilled /></el-icon>
				</div>
				<div class="div_style2">
					<span>主页</span>
				</div>
			</li>
			<li id="second_bottom">
				<div class="bottom_logo">
					<el-icon :size="20" color="rgb(193,193,193)"><Menu /></el-icon>
				</div>
				<div class="div_style2">
					<span>一键开门</span>
				</div>
			</li>
			<li id="third_bottom">
				<div class="bottom_logo">
					<el-icon :size="20" color="rgb(193,193,193)"><User /></el-icon>
				</div>
				<div class="div_style2">
					<span>我的</span>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import { HomeFilled, Menu, User } from "@element-plus/icons";
	export default {
		name: "MainOpenDoor",
		components: {
			HomeFilled,
			Menu,
			User
		}
	}
</script>

<style lang="less" scoped>
	#bottom {
		width: 100%;
		display: block;
		
	}
	
	#bottom span {
		font-size: 8px;
	}
	#bottom_ul li {
		float: left;
	}
	#first_bottom {
		margin-left: 40px;
	}
	#second_bottom {
		margin-left: 70px;
	}
	#third_bottom {
		margin-left: 40px;
	}
	.bottom_logo {
		width: 25px;
		height: 25px;
		float: left;
		margin-left: 1px;
		margin-top: 1px;
		display: block;
	}

</style>